<template>
  <div class="message-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="消息中心"
        fixed
    />
    <div>
      <van-button
          v-for = "(item, index) in buttonList"
          :key = "index"
          :type = "activeIndex === index? 'primary' : 'default'"
          :icon = "item.icon"
          @click = "handleClick(index)"
      >{{item.text}}</van-button>
    </div>

    <!-- 工单列表容器 -->
    <div class="ticket-list" >
      <div v-for="one in messageList" :key="one.id" class="ticket-item">
        <div class="ticket-header" @click="toDetail(one)">
          <div class="ticket-id" v-if="one.messageLevel==1" style="color: orange"><b>紧急</b></div>
          <div class="ticket-id" v-if="one.messageLevel==2" style="color: red"><b>特急</b></div>
          <div class="ticket-id" v-if="one.messageLevel==3" style="color: #1989fa"><b>普通</b></div>
          <!--          标签状态右对齐-->
          <div class="ticket-status">
            {{one.createTime}}
          </div>
        </div>
        <div class="ticket-content">
          <div class="ticket-info">
            <div class="ticket-header" v-if="one.messageType==1">工单信息</div>
            <div class="ticket-header" v-if="one.messageType==2">巡检信息</div>
            <div class="ticket-header" v-if="one.messageType==3">运输信息</div>
            <div class="ticket-code">{{ one.messageContent }}</div>
          </div>
          <div class="ticket-status">
            <van-button type="danger" size="small" @click="deleteOne(one)">删除</van-button>
          </div>
        </div>
      </div>
    </div>

    <van-dialog v-model="showDialog" show-cancel-button @confirm="onConfirm">
      <h3>删除</h3>
      你确定要删除嘛？
    </van-dialog>

    <!-- 底部导航栏 -->
    <van-tabbar route>
      <van-tabbar-item icon="home-o" to="/medical">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/message" dot>消息</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Tab, Tabs, NavBar, Cell, Icon } from 'vant';
import axios from "axios";

export default {
  name: "MessageView",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
  },
  data() {
    return {
      active: 0,
      messageList: [],
      buttonList: [
        {text: '通知', icon: 'chat'},
        {text: '告警', icon: 'warning-o'},
        {text: '预警', icon: 'bell'}
      ],
      activeIndex: 0,
      form:{
        transferType:'通知',
        messagePeople:"22",
      },
      user:{},
      userDetail:{},
      showDialog:false,
      deleteId:null,
    }
  },
  methods: {
    onConfirm(){
      axios.post("http://localhost:9999/myModule-service/messageCenter/deleteOne?id="+this.deleteId).then(res=>{
        this.$toast("删除成功");
        this.findAll();
      })
    },
    deleteOne(one){
      this.showDialog = true;
      this.deleteId = one.id;
    },
    toDetail(one){
      this.$router.push({
        path:'/messageDetail',
        query:{
          id:one.id
        }
      })
    },
    findById(){
      axios.post("http://localhost:9999/api-user-service/user/findById?id="+this.user.userId).then(res=>{
        this.userDetail = res.data;
      })
    },
    findAll(){
      this.findById();
      if (this.user.pid!=1){
        this.form.messagePeople = this.user.username;
        axios.post("http://localhost:9999/myModule-service/messageCenter/findAll",this.form).then(res=>{
          this.messageList = res.data;
        })
      }else{
        this.form.messagePeople = "";
        axios.post("http://localhost:9999/myModule-service/messageCenter/findAll",this.form).then(res=>{
          this.messageList = res.data;
        })
      }
    },
    handleClick(index) {
      this.activeIndex = index;
      this.form.transferType = this.buttonList[index].text;
      this.findAll();
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  beforeCreate() {
    this.user = JSON.parse(localStorage.getItem("aa"));
  },
  created(){
    this.user = JSON.parse(localStorage.getItem("aa"));
    this.findById();
  },
  mounted(){
    this.findAll();
  }
}
</script>

<style scoped>
.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}
.message-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  padding-bottom: 50px;
}

.ticket-status{
  font-size: 12px;
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
}

.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}

:deep(.van-dropdown-menu) {
  background-color: #fff;
}

.ticket-list {
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  border: #ebedf0 1px solid;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  color: #323233;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
}
.ticket-code{
  font-size: 13px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
  color: white;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
  color: white;
}

:deep(.van-tabs__wrap) {
  border-bottom: 1px solid #ebedf0;
}

:deep(.van-tab) {
  color: #323233;
}

:deep(.van-tab--active) {
  color: #1989fa;
  font-weight: 500;
}
.ticket-status{
  font-size: 14px;
}
</style>
